<template>
  <div class="app-container">
    <el-form ref="queryForm" :inline="true">
      <el-form-item>
        <el-button type="success" @click="handleAdd"
          >新增</el-button>
        </el-form-item>
        <!-- <el-button
          type="danger"
          :icon="Delete"
          @click="handleDelete"
          :disabled="multiple"
          >删除</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="queryParams.name"
          placeholder="商品名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-cascader
          v-model="queryParams.categoryId"
          placeholder="商品分类"
          :props="{ emitPath: false }"
          :options="categoryOptions"
          clearable
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="handleQuery"
          >查询</el-button
        >
        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item> -->
    </el-form>
  
    <el-table
      ref="dataTableRef"
      v-loading="loading"
      :data="roleList"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      border
    >
      <el-table-column type="selection" min-width="5%" center />
      <el-table-column type="index" label="序号" min-width="15%" center />
      <el-table-column label="角色" prop="roleName" min-width="100" />
      <el-table-column label="简介" prop="description" min-width="100" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            plain
            @click.stop="handleUpdate(scope.row)"
          />
          <el-button
            type="danger"
            :icon="Delete"
            circle
            plain
            @click.stop="handleDelete(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>

      <!-- 表单弹窗 -->
      <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
        <el-form
          ref="dataFormRef"
          :model="formData"
          label-width="100px"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="formData.roleName" />
          </el-form-item>
          <el-form-item label="简介" prop="description">
            <el-input type="textarea" v-model="formData.description" />
          </el-form-item>
        </el-form>
  
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>

  </template>
  
<script lang="ts" setup>
import {reactive, ref, onMounted, toRefs } from 'vue';  //导入vue的一些内置方法，v2是全部导入，v3是按需导入
import { ElTable, ElMessage, ElMessageBox, ElForm } from 'element-plus';  //引入el的一些基础组件
import { useRouter } from 'vue-router';  //引入路由

  import {
  Search,
  Position,
  Edit,
  Refresh,
  Delete,
  View,
} from '@element-plus/icons-vue';  //导入图标
  //导入实体形状
  import {RoleItem, RoleFormData} from '@/types';
  import { Dialog } from '@/types/common';
  //导入api
  import { listRoles, deleteRole, updateRole, addRole, getRoleFormDetail } from '@/api/system/role';

  const dataTableRef = ref(ElTable);  //暂时算是，控制表格吧
  const dataFormRef = ref(ElForm); //(模态框的控制) 属性名必须和元素的ref属性值一致
  const router = useRouter();  //实例化一个路由对象吧？


  //全局用的数据
const state = reactive({
  // 遮罩层
  loading: true,
  // 选中数组
  ids: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  //弹框
  dialog: {} as Dialog,
  //弹出框表单
  formData: {} as RoleFormData,
  roleList: [] as RoleItem[],
})

const{
  loading,
  roleList,
  dialog,
  formData
  } = toRefs(state)  //从这里把数据对象衍射出去，先这样理解先

  const search = ref('')


  //列表查询的方法
 function handleQuery() {
  state.loading = true;  //打开遮罩
  listRoles().then(({ data }) => {
    state.roleList = data; 
    console.log(state.roleList)
    state.loading = false;  //关闭遮罩
  }
 )  //初始化数据列表
}
//新增
function handleAdd() {
  state.dialog = {
    title: '添加角色',
    visible: true,
  };
}
  //编辑
  function handleUpdate(row: any) {
    state.dialog = {
    title: '修改角色',
    visible: true,
  };
  const roleId = row.id || state.ids;
  getRoleFormDetail(roleId).then((response) => {
    state.formData = response.data;
  });
}
//删除
function handleDelete(row: any) {
  const ids = row.id || state.ids.join(',');
  ElMessageBox.confirm('是否确认删除选中的数据项?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(function () {
      return deleteRole(ids);
    })
    .then(() => {
      ElMessage.success('删除成功');
      handleQuery();
    });
}
  //行单击事件
  function handleRowClick(row: any) {
  dataTableRef.value.toggleRowSelection(row);  //单选按钮选中，应该是
}
//全选事件？
function handleSelectionChange(selection: any) {
  state.ids = selection.map((item: { id: any }) => item.id);
  state.single = selection.length != 1;  //单个？
  state.multiple = !selection.length;  //多个？
}
//弹框表单提交
function submitForm() {
      const roleId = state.formData.id;
      if (roleId) {
        updateRole(roleId, state.formData).then(() => {
          ElMessage.success('修改成功');
          cancel();  //关闭模态框
          handleQuery();  //重新查询表格数据
        });
      } else {
        addRole(state.formData).then(() => {
          ElMessage.success('新增成功');
          cancel();  //关闭模态框
          handleQuery();   //重新查询表格数据
        });
      }
}
//关闭模态框
function cancel() {
  state.formData.id = undefined;
  dataFormRef.value.resetFields();  //将模块框中的字段重置
  state.dialog.visible = false;  //模态框置为隐藏
}
  //多选删除的方法
//   function handleDelete(row: any) {
//   const ids = row.id || state.ids.join(',');
//   ElMessageBox.confirm('是否确认删除选中的数据项?', '警告', {
//     confirmButtonText: '确定',
//     cancelButtonText: '取消',
//     type: 'warning',
//   })
//     .then(function () {
//       return deleteGoods(ids);
//     })
//     .then(() => {
//       ElMessage.success('删除成功');
//       handleQuery();
//     });
// }








//vue的生命周期函数，这个生命周期函数，按照字面意思就是，组件安装成功之后，意思是数据呀什么的什么的，都声明好了
//然后，我在这个组件声明好之后，给表格填入数据
onMounted(() => {
  handleQuery();  //初始化，给表数据
 
});

</script>
  